<template>
  <view class="flex-col page">
    <view class="flex-col">
      <view class="flex-row justify-between items-center section"></view>
      <view class="flex-row items-center section_2">
        <image class="shrink-0 image_4" src="@/static/common/back.png" @click="backToHome" />
        <view class="ml-16 flex-row items-center flex-1 section_3">
          <image class="image_5" src="@/static/common/i-search.png" />
          <u-input class="text ml-9" v-model="searchText"></u-input>
        </view>
        <view class="ml-16 flex-col justify-start items-center shrink-0 text-wrapper" @click="handleSearch">
          <text class="font">{{$t('common.search')}}</text>
        </view>
      </view>
    </view>
    <view class="text_3 mt-12 ml-16">全部短剧</view>

    <div class="content" v-if="vedioList.length>0">
      <view class="flex-col items-start group_2 equal-division-item" v-for="item in vedioList">
        <!-- <image class="image_7" :src="require(item.image)" @click="skipToVedio(item.text)" /> -->
        <image :src="item.image" class="image_7" @click="skipToVedio(item.playletId)"></image>

        <text class="font_3 mt-10">{{ item.text }}</text>
        <text class="font_4 text_4 mt-10">{{ item.des }}</text>
      </view>
    </div>


    <view class="flex-col items-center mt-124" v-else>
      <image class="image_6" src="@/static/common/i-empty.png" />
      <text class="text_2 mt-27">{{$t('common.nodatayet')}}</text>
    </view>
  </view>
</template>

<script>
import search from '../../uni_modules/uview-ui/libs/config/props/search';
import { getPlayletListAPI, getPlayClassAPI } from '@/service/index.js'

export default {
  components: {},
  props: {},
  data() {
    return {
      searchText: '',
      vedioList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 15
      }
    };
  },

  methods: {
    async getPlayletList() {
      const res = await getPlayletListAPI({
        "pageNum": this.pageInfo.pageNum,
        "pageSize": this.pageInfo.pageSize,
        "keyword": this.searchText
      });
      this.vedioList = res.data.list;
      res.data.list.forEach(item => {
        item.image = "https://miniflix.tos-accelerate.volces.com/res/" + item.cover;
        item.text = item.playletName;
        item.des = '共' + item.num + '集'
      })

      this.vedioList = [...this.vedioList, ...res.data.list]
      console.log(" this.vedioList", this.vedioList)
    },

    backToHome() {
      uni.switchTab({
        url: '/pages/home/index'
      });
    },
    handleSearch() {
      if (this.searchText.trim()) {
        this.getPlayletList()

      } else {
        uni.showToast({
          title: 'Search keyword cannot be empty',
          icon: 'none'
        });
      }
    },
    skipToVedio(text) {
      uni.navigateTo({
        url: `/pages/video/index?playletId=${text}&num=1`
      });
    },
  }
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}

.ml-9 {
  margin-left: 0.56rem;
}

.mt-124 {
  margin-top: 7.75rem;
}

.mt-27 {
  margin-top: 1.69rem;
}

.content {
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.5rem 1rem;
  gap: 1rem;
}

.group_2 {
  .image_7 {
    border-radius: 0.5rem;
    filter: drop-shadow(0rem 0.25rem 0.25rem #00000033);
    width: 100%;
  }

  .font_3 {
    font-size: 0.88rem;
    font-family: PingFang SC;
    line-height: 0.65rem;
    color: #ffffff;
  }

  .font_4 {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.65rem;
    color: #ffffff80;
  }

  .text_4 {
    line-height: 0.69rem;
  }
}

.page {
  padding-bottom: 25.13rem;
  background-color: #140c2b;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    padding: 1.13rem 1rem 1.13rem 2.25rem;
    background-color: #0c0132;

    .image {
      width: 1.06rem;
      height: 0.56rem;
    }

    .image_2 {
      width: 0.94rem;
      height: 0.56rem;
    }

    .image_3 {
      width: 1.5rem;
      height: 0.71rem;
    }
  }

  .section_2 {
    padding: 0.38rem 1rem;
    background-color: #0c0132;

    .image_4 {
      border-radius: 0.5rem;
      width: 1.78rem;
      height: 1.78rem;
    }

    .section_3 {
      padding: 0.5rem 0.75rem;
      background-color: #ffffff26;
      border-radius: 2rem;
      height: 2rem;

      /deep/ .uni-input-input {
        color: #ffffff;
      }

      .image_5 {
        width: 1rem;
        height: 1rem;
      }

      .text {
        color: #ffffff;
        font-size: 0.88rem;
        font-family: PingFang SC;
        line-height: 0.65rem;
        border: unset;
      }
    }

    .text-wrapper {
      padding: 0.63rem 0;
      background-color: #0000001a;
      border-radius: 0.5rem;
      backdrop-filter: blur(0.38rem);
      width: 3.28rem;
      height: 1.78rem;
      border-left: solid 0.031rem #ffffff33;
      border-right: solid 0.031rem #ffffff33;
      border-top: solid 0.031rem #ffffff33;
      border-bottom: solid 0.031rem #ffffff33;
    }
  }

  .font {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.56rem;
    color: #ffffff;
  }

  .image_6 {
    width: 16.88rem;
    height: 9.5rem;
  }

  .text_2 {
    color: #ffffff80;
    font-size: 1rem;
    font-family: PingFang SC;
    line-height: 0.93rem;
  }

  .text_3 {
    color: #ffffff;
    font-size: 1.1rem;
  }
}
</style>